import * as React from 'react';
import { Anchor } from 'antd';
import classnames from 'classnames';
import './index.less';
import Icon from '@ant-design/icons';
import { useEffect } from 'react';
import scrollToField from '@ey-utils/utils/formily-utils/scrollToField';

const { useState } = React;
const svg = () => (
  <svg width="1em" height="1em" fill="currentColor" viewBox="0 0 1024 1024">
    <path d="M234.633 411.443V158.515L505.719 0l271.224 158.447v245.692L1024 548.59v316.894L752.845 1024 512 883.234 271.155 1024 0 865.485V548.523l234.564-137.148 0.069 0.068z m29.832 89.156L92.228 601.361v210.193l179.678 105.2 179.746-105.132V610.1L264.465 500.6z m63.693-88.268l183.296 107.11 171.554-100.215v-205.62L505.583 109.91 328.158 213.606v198.725z m426.735 84.377L572.416 603.136v209.306L753.254 918.05l180.907-105.608v-211.08L754.893 496.707z" />
  </svg>
);
const Svg1 = (props: any) => <Icon component={svg} {...props} />;

export interface AnchorPanelProps {
  anchorList: any[];
}
const handleClick = (e: React.MouseEvent<HTMLElement>) => {
  e.preventDefault();
};
const AnchorPanel: React.FC<AnchorPanelProps> = ({ anchorList }) => {
  const [active, setActive] = useState(false);
  const toggleActive = () => {
    setActive(!active);
  };

  const handleChange = (currentActiveLink: string) => {
    scrollToField(currentActiveLink);
  };

  return (
    <div
      className={classnames('anchor-content', {
        active,
      })}
    >
      <Anchor
        className="anchor-info"
        offsetTop={106}
        style={{}}
        affix={false}
        onClick={handleClick}
        onChange={handleChange}
      >
        {anchorList.map((item: any) => (
          <Anchor.Link href={`#${item.code}`} title={item.name} />
        ))}
      </Anchor>
      <div
        className="anchor-op-btn"
        onClick={() => {
          toggleActive();
        }}
      >
        <Svg1 />
      </div>
    </div>
  );
};

export default AnchorPanel;
